<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#a{
				width: 500px;
				height: 500px;
				border:5px solid black;
			}
			#b{
				width: 300px;
				height: 300px;
				border: 5px solid blue;
			}
			#c{
				width: 100px;
				height: 100px;
				border:5px solid red;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c"></div>
			</div>
		</div>
	</body>
</html>
<script>
	//事件绑定

	//获取元素
	var aDiv = document.getElementById("a");
	var bDiv = document.getElementById("b");
	var cDiv = document.getElementById("c");
    //先捕获阶段，后冒泡阶段
    aDiv.addEventListener('click',function(){
    	console.log("adiv1");
    },false);
    aDiv.addEventListener('click',function(){
    	console.log("adiv2");
    },false);
    bDiv.addEventListener('click',function(){
    	console.log("bdiv1");
    },false);
    bDiv.addEventListener('click',function(){
    	console.log("bdiv2");
    },false);
    cDiv.addEventListener('click',function(){
    	console.log("cdiv1");
    },false);
    cDiv.addEventListener('click',function(){
    	console.log("cdiv2");
    },false);







</script>